<template>
  <div class="checkGoods">
    <swipeout>
      <flexbox orient="vertical">
        <flexbox-item v-for="item in initData" :key="item">
          <div class="flex-demo">
            <swipeout-item transition-mode="follow">
              <div slot="right-menu">
                <swipeout-button @click.native="onDel(item.id)" class="fr" type="warn" :width="50">删除</swipeout-button>
                <!--<swipeout-button @click.native="onEdite(item.id)" class="fr" type="primary" :width="50">编辑</swipeout-button>-->
                <swipeout-button @click.native="onDetail(item.id)" class="fr" type="default" :width="50">详情</swipeout-button>
              </div>
              <div slot="content" class="demo-content vux-1px-t">
                <flexbox>
                  <flexbox-item><div class="flex-demo img">
                    <x-img default-src='' :src="item.stockImg[0].src" class="ximg-demo" error-class="ximg-error" success-class="previewer-demo-img" @click="show(0)" :offset="-100" container="#vux_view_box_body"></x-img>
                  </div></flexbox-item>
                  <flexbox-item>
                    <div class="flex-demo">
                      <flexbox orient="vertical">
                        <flexbox-item>
                          <div class="flex-demo">
                            <span>货号：{{item.id}}</span>
                          </div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo">
                            <span>品牌：{{item.stockBrand}}</span>
                          </div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo">
                            鞋号：<span v-for="num in item.stockStatus">{{num.size}}</span><br>
                            <!--颜色：<span v-for="tp in item.stockStatus"><o v-for="clr in tp.type">{{clr.color}}</o></span>-->
                          </div>
                        </flexbox-item>
                      </flexbox>
                    </div>
                  </flexbox-item>
                </flexbox>
              </div>
            </swipeout-item>
          </div>
        </flexbox-item>
      </flexbox>
    </swipeout>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { XInput, XButton, Group, Flexbox, FlexboxItem, TransferDom, Swipeout, SwipeoutItem, SwipeoutButton, XImg } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      XImg
    },
    name: 'checkGoods',
    data () {
      return {
        initData: [],
        saveData: []
      }
    },
    methods: {
      onDetail (id) {
        this.$router.push({path: '/goodsDetail/' + id})
      },
      onDel (id) {
        let self = this
        this.$vux.confirm.show({
          title: '确定删除?',
          content: '',
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            $.each(self.initData, function (k) {
              if (self.initData[k].id == id) {
                self.initData.splice(k, 1)
              }
            })
            self.saveData = JSON.stringify(self.initData)
            localStorage.setItem('goods', self.saveData)
          }
        })
      },
      onEdite (id) {
        this.$router.push({path: '/editDtl/' + id})
      },
      handleEvents (type) {
        console.log('event: ', type)
      }
    },
    beforeMount () {
      this.initData = JSON.parse(localStorage.getItem('goods'))
    },
    mounted () {

    }
  }
</script>

<style scoped>
  .checkGoods{
    margin-bottom: 55px;
  }
  .img{
    width: 155px;
    height: 100px;
    overflow: hidden;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .mt10{
    margin: 5px auto;
  }
  .ml20{
    margin-left: 10px;
  }
  .flex-demo{
    margin-left: 10px;
  }
  .fr{
    float: right;
  }
</style>
